<div class="outer-container">

  <div class="search-box">
    <mat-form-field>
      <input
        matInput
        #searchInput
        placeholder="Search"
        autocomplete="off"
        (keyup)="onSearch()"
        [(ngModel)]="query"
      >
      <button mat-button *ngIf="query" matSuffix mat-icon-button aria-label="Clear" (click)="clearSearch()">
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>
  </div>

  <mat-button-toggle-group
    class="search-toggle"
    appearance="legacy"
    (change)="isSearchingLibrary = !isSearchingLibrary; search()"
  >
    <mat-button-toggle class="toggle-button" value="Apple Music" [checked]="!isSearchingLibrary">Apple Music</mat-button-toggle>
    <mat-button-toggle [disabled]="!musicKitService.isAuthorized" class="toggle-button" value="Library" [checked]="isSearchingLibrary">Library</mat-button-toggle>
  </mat-button-toggle-group>

  <div class="search-results">
    <mat-tab-group [(selectedIndex)]="selectedTabIndex" class="tabs" *ngIf="!isLoading && hasQueried && numOfResults">
      <mat-tab label="Songs" [disabled]="!songResults.length">
        <div class="song-results">
          <app-song
            *ngFor="let songData of songResults; let i = index"
            [songData]="songData"
            (uponPlay)="playSong(i)"
          >
          </app-song>
        </div>
      </mat-tab>

      <mat-tab label="Albums" [disabled]="!albumResults.length">
        <div class="album-results">
          <app-album-preview
            *ngFor="let albumData of albumResults"
            [albumData]="albumData"
          >
          </app-album-preview>
        </div>
      </mat-tab>

      <mat-tab label="Artists" [disabled]="!artistResults.length">
        <div class="artist-results">
            <app-artist-preview
              *ngFor="let artistData of artistResults"
              [artistData]="artistData"
            >
            </app-artist-preview>
          </div>
      </mat-tab>

      <mat-tab label="Playlists" [disabled]="!playlistResults.length">
        <div class="album-results">
          <app-playlist-preview
            *ngFor="let playlistData of playlistResults"
            [playlistData]="playlistData"
          >
          </app-playlist-preview>
        </div>
      </mat-tab>
    </mat-tab-group>
    <div class="no-results" *ngIf="!isLoading && !numOfResults && hasQueried">
      No results found for "{{lastQuery}}"
    </div>
    <mat-spinner class="spinner" *ngIf="isLoading"></mat-spinner>
  </div>
</div>
